<template>
  <div class="categorizeContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分类管理</span>
        <el-button type="success" @click="addCategorize" style="float: right; margin: -8px 0">添加分类</el-button>
        <el-dialog title="提示" :visible.sync="addDialog" width="30%" :before-close="addDialogClose">
          <el-form
            :model="cateForm"
            :rules="cateRules"
            ref="cateRulesForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="活动名称" prop="newName">
              <el-input v-model="cateForm.newName"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelAdd('cateRulesForm')">取 消</el-button>
            <el-button type="primary" @click="sureAddDialog('cateRulesForm')">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="categorizeForm">
        <el-table
          :data="categorizesData.filter(data => !search || data.categorize_name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
        >
          <el-table-column label="Date" prop="create_time"></el-table-column>
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="Title" prop="categorize_name"></el-table-column>
          <el-table-column label="封面" prop="profile">
            <template slot-scope="scope">
              <img class="categorizeProfile" :src="scope.row.profile" alt />
            </template>
          </el-table-column>
          <el-table-column label="Author" prop="author"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope>
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizeArr"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="editDialog" width="30%" :before-close="editDialogClose">
      <el-form
        :model="cateForm"
        :rules="cateRules"
        ref="cateRulesForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名" prop="newName">
          <el-input v-model="cateForm.newName" :placeholder="this.cateForm.oldName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit('cateRulesForm')">取 消</el-button>
        <el-button type="primary" @click="sureEdit('cateRulesForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategorizes,
  delCategorize,
  addCategorize,
  editCategorize
} from "@/api/categorize";
export default {
  data() {
    return {
      currentPage1: 1,
      pageSizeArr: [5, 10, 20, 40, 80],
      total: 1,
      pageSize: "",
      categorizesData: [],
      search: "",
      addDialog: false,
      editDialog: false,
      cateForm: {
        newName: "",
        oldName:"",
        categorize_id:''
      },
      cateRules: {
        newName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 请求数据方法封装
    async getCategorizes(data) {
      if (data) {
        await getCategorizes(data).then(res => {
          this.categorizesData = res.data.categorizes;
          this.total = res.data.total;
        });
      } else {
        const data = { pageSize: "", pageNum: "" };
        await getCategorizes(data).then(res => {
          this.categorizesData = res.data.categorizes;
          this.total = res.data.total;
        });
      }
    },
    // 修改分类
    handleEdit(index, row) {
      this.editDialog = true;
      this.cateForm.oldName = row.categorize_name
      this.categorize_id =row.id
    },
    // 确认修改分类
    sureEdit(cateRulesForm){
      this.$refs[cateRulesForm].validate(async valid => {
        if (valid) {
          const data = {
            categorize_name: this.cateForm.newName,
            user_id: this.$store.state.UserInfo.userInfo.id,
            categorize_id:this.categorize_id
          };
          await editCategorize(data).then(async res => {
            const data = {
              pageSize: this.pageSize,
              pageNum: this.currentPage1
            };
            await this.getCategorizes(data);
            this.$refs[cateRulesForm].resetFields();
            this.editDialog = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消修改分类
    cancelEdit(){
      this.$refs[cateRulesForm].resetFields();
      this.editDialog = false;
      this.$message({
        type: "success",
        message: "取消成功!"
      });
    },
    // 删除分类
    handleDelete(index, row) {
      this.$confirm(
        `此操作将永久删除该分类--${row.categorize_name}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          const data = {
            isdel: row.isdel,
            categorize_id: row.id,
            user_id: this.$store.state.UserInfo.userInfo.id
          };
          await delCategorize(data).then(async res => {
            const data = {
              pageSize: this.pageSize,
              pageNum: this.currentPage1
            };
            await this.getCategorizes(data);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 添加分类、
    addCategorize() {
      this.addDialog = true;
    },
    // 取消添加
    cancelAdd(cateRulesForm) {
      this.$refs[cateRulesForm].resetFields();
      this.addDialog = false;
      this.$message({
        type: "success",
        message: "取消成功!"
      });
    },
    // 确认添加分类
    sureAddDialog(cateRulesForm) {
      this.$refs[cateRulesForm].validate(async valid => {
        if (valid) {
          const data = {
            categorize_name: this.cateForm.newName,
            author: this.$store.state.UserInfo.userInfo.username
          };
          await addCategorize(data).then(async res => {
            this.currentPage1 = 1;
            const data = {
              pageSize: this.pageSize,
              pageNum: this.currentPage1
            };
            await this.getCategorizes(data);
            this.$refs[cateRulesForm].resetFields();
            this.addDialog = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 页码变化了
    async handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage1 = 1;
      const data = { pageSize: this.pageSize, pageNum: this.currentPage1 };
      await this.getCategorizes(data);
    },
    // 页数据大小变化了
    async handleCurrentChange(val) {
      this.currentPage1 = val;
      const data = { pageSize: this.pageSize, pageNum: this.currentPage1 };
      await this.getCategorizes(data);
    },
    // 增加分类关闭处理函数
    addDialogClose(done) {
      this.$refs["cateRulesForm"].resetFields();
      this.addDialog = false;
      this.$message({
        type: "success",
        message: "关闭成功!"
      });
    },
    // 编辑关闭处理函数
    editDialogClose() {
      this.editDialog = false;
      this.$message({
        type: "success",
        message: "关闭成功!"
      });
    }
  },
  async mounted() {
    await this.getCategorizes();
  }
};
</script>
<style lang="less" scoped>
.categorizeProfile {
  width: 60px;
  height: 60px;
}
.categorizeContainer {
  height: 80vh;
}
.categorizeForm {
  height: 70vh;
  overflow: auto;
}
</style>